<template>
	<div class="pc_cart">
		<div class="pc_cart2">
			<div style="border-bottom: solid  1px skyblue;">我的购物车清单</div>
			<div>
				<el-table ref="multipleTable" :data="goods" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange" type="index">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="图片" width="120">
						<template slot-scope="scope"><img style="width: 100%;height: 30%;" :src="`http://127.0.0.1/api/public/showimg/${scope.row.book.pic}`" /></template>
					</el-table-column>
					<el-table-column prop="book.name" label="商品名称" width="120">
					</el-table-column>
					<el-table-column prop="price" label="商品价钱" width="120">
					</el-table-column>
					<el-table-column   label="商品数量" width="160">
						<template slot-scope="scope">
							<el-button icon="el-icon-minus" @click="fun(scope.$index,-1)"></el-button>
							{{scope.row.num}}
							<el-button icon="el-icon-plus" @click="fun(scope.$index,+1)"></el-button>
						</template>
					</el-table-column>
					<el-table-column  label="商品总价" width="120">
							<template slot-scope="scope">{{scope.row.sum}}</template>
					</el-table-column>
					<el-table-column prop="address" label="编号" show-overflow-tooltip>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px">
					<div>总价:{{goodsSum}}
					<el-button @click="toggleSelection()">取消选择</el-button>
					 </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				goodsSum:0,
				goods: [],
				multipleSelection: []
			}
		},

		methods: {
			fun(i,n){
				this.goodsSum-=this.goods[i].num*this.goods[i].price
				console.log(i)
				console.log(n)
				console.log(this.goods[i])
				this.goods[i].num += n
				if (this.goods[i].num <= 0) {
					this.goods[i].num = 1
				}
				this.goods[i].sum = this.goods[i].num*this.goods[i].price
				this.goodsSum+=this.goods[i].num*this.goods[i].price
			},
			
			getMyGoods() {
				this.goods = [];
				this.$get("/api/fore/cart/findMyCarts").then((resp) => {
					console.log(resp.data.data);
					resp.data.data.forEach((item) => {
						item.sum=item.price*item.num
						item.check = true
						this.goodsSum+=item.price*item.num
						this.goods.push(item)
					})

				})
				console.log(this.goods)
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
		mounted() {
			this.getMyGoods();
		}
	}
</script>

<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	.pc_cart {
		width: 100%;
		height: 100%;
	}

	.pc_cart2 {
		text-align: center;
		border: solid 1px rebeccapurple;
		width: 70%;
		margin: auto;
	}
</style>